<template>
  <div>
    访问接口的地址：<input type="text" v-model="address"/>
    <br/>
    访问url的页数：<input type="text" v-model="one"/>
    <br/>
    访问url的页数：<input type="text" v-model="two"/>
    <br/>
    访问url的页数：<input type="text" v-model="three"/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <el-button type="success" @click="add()" :disabled="isButtonDisabled">点击录入信息</el-button>
    <br/>
    <br/>
    <br/>
    <br/>
    <el-button @click="thisone">重置按钮</el-button>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";
export default {
  name: "DataLuRu",
  data(){
    return{
      one:1,
      two:2,
      three:3,
      address:"",
      isButtonDisabled:false
    }
  },methods:{
    add(){
      //执行开始禁止点击按钮
      this.isButtonDisabled = true;
      //执行异步请求
      axios(`http://localhost:8000/consumer/roadtransportvehicles?a=${this.one}&b=${this.two}&c=${this.three}&count=3000&d=${this.address}`).then(
          (res)=>{
            this.one +=3;
            this.two +=3;
            this.three +=3;
            ElMessage.info(res.data)
          }
      )
      //倒计时5秒后开放按钮
      setTimeout(()=>{
        this.isButtonDisabled = false; //开启按钮功能
      },5000)
    },thisone(){
      this.one=1;
      this.two=2;
      this.three=3;
    }
  }
}
</script>

<style scoped>

</style>